<template>
  <div id="DetailsContent">
    <my-swiper :banner="swapperList" class="detail-banner"></my-swiper>
    <div class="detail-promotion">
      <span>3.7活动价：</span><span>￥62.93~71.90</span>
    </div>
    <div class="detail-head">
      <div class="head-price">￥69.93~79.89 <span>¥99.90起</span></div>
      <div class="title">
        <div class="left">
          <span>3.7大促</span>
          春季中长款连帽卫衣女连帽套头绑带熊印花卫衣加厚薄款均有
        </div>
        <div class="right">
          <img
            src="@/assets/img/detail/191218_762ibk3def84blec68cbe4le770df_54x54.png"
            alt=""
          />
          <span>帮我选</span>
        </div>
        <div class="post">免邮费</div>
        <img
          src="@/assets/img/detail/210205_0h7j3j84jj055k8gf3i0d4akkgf2c_750x76.png"
          alt=""
        />
      </div>
    </div>
    <div class="gray-line"></div>
    <div class="detail-safe">
      <img
        src="@/assets/img/detail/180417_25kbfg1c3hdbd120394ji4b11bk2k_36x36.png_80x80.v1cAC.40.webp"
        alt=""
      />
      72小时发货
      <img
        src="@/assets/img/detail/180417_25kbfg1c3hdbd120394ji4b11bk2k_36x36.png_80x80.v1cAC.40.webp"
        alt=""
      />
      7天无理由退货
      <img
        src="@/assets/img/detail/180417_25kbfg1c3hdbd120394ji4b11bk2k_36x36.png_80x80.v1cAC.40.webp"
        alt=""
      />
      延误必赔
      <span class="more">></span>
    </div>
    <div class="gray-line"></div>
    <div class="choose">
      请选择： 颜色 尺码
      <span class="more">></span>
    </div>
    <div class="gray-line"></div>

    <div class="detail-comment">
      <div class="head">
        卖家评论 <span>8</span> <span>|</span> 销量<span>42</span>
        <span class="more">></span>
      </div>
      <div class="tag"><span>有图片（1）</span><span>质量好（1）</span></div>
      <div class="comment-list">
        <div class="comment-item">
          <div class="head">
            <img
              src="@/assets/img/detail/180104_828c27164jjc37jla9ccgg364la7f_640x640.jpg_48x48.webp"
              alt=""
            />
            <div>长生果Bess</div>
          </div>
          <div class="content-show">
            <p>该用户给出了5星好评。</p>
          </div>
          <div class="comment-date">2019-11-26</div>
        </div>
        <div class="comment-item">
          <div class="head">
            <img
              src="@/assets/img/detail/180104_828c27164jjc37jla9ccgg364la7f_640x640.jpg_48x48.webp"
              alt=""
            />
            <div>长生果Bess</div>
          </div>
          <div class="content-show">
            <p>该用户给出了5星好评。</p>
          </div>
          <div class="comment-date">2019-11-26</div>
        </div>
      </div>
    </div>
    <div class="gray-line"></div>
    <div class="shop">
      <img
        src="@/assets/img/detail/180314_79c6e4g99l483fk3k6i07kjjl48e3_640x640.jpg_120x120.webp"
        alt=""
      />
      <div class="shop-inf">
        <div class="shop-name">麦旋风MAX</div>
        <div class="shop-star">
          <img
            src="@/assets/img/detail/200205_2eg19cl3528hj8ihbc21ci5l0k857_44x44.png"
            alt=""
          />
          <img
            src="@/assets/img/detail/200205_2eg19cl3528hj8ihbc21ci5l0k857_44x44.png"
            alt=""
          />
          <img
            src="@/assets/img/detail/200205_2eg19cl3528hj8ihbc21ci5l0k857_44x44.png"
            alt=""
          />
          <div>|</div>
          <div>在架商品 932</div>
        </div>
        <div class="shop-data">
          <div>9.6万人关注</div>
          <div>累计销量78.2万+</div>
        </div>
      </div>
      <div class="shop-enter">进店<span class="more">></span></div>
    </div>
    <div class="gray-line"></div>

    <div class="detail-param">
      <img
        src="@/assets/img/detail/190417_2d51ljj2a42lddkg49ibag494g3ca_1125x540.png_468x468.webp"
        alt=""
      />
      <div class="param-form">
        <ul>
          <li>
            <span>风格</span>
            <span>街头</span>
          </li>
          <li>
            <span>尺码</span>
            <span>M码，S码</span>
          </li>
          <li>
            <span>厚薄</span>
            <span>抓绒</span>
          </li>
          <li>
            <span>衣长</span>
            <span>中长款（66-80cm）</span>
          </li>
          <li>
            <span>材质</span>
            <span>棉</span>
          </li>
          <li>
            <span>领型</span>
            <span>连帽</span>
          </li>
          <li>
            <span>图案</span>
            <span>卡通动漫</span>
          </li>
          <li>
            <span>袖型</span>
            <span>常规袖）</span>
          </li>
          <li>
            <span>衣门襟</span>
            <span>套头</span>
          </li>
          <li>
            <span>季节</span>
            <span>春季</span>
          </li>
          <li>
            <span>潮流</span>
            <span>韩系</span>
          </li>
          <li>
            <span>颜色</span>
            <span
              >黑色-无字母,加绒款/车厘子色-无字母,黑色字母,车厘子色-无字母,加绒款/车厘子色字母,车厘子色字母,加绒款/黑色字母,加绒款/黑色-无字母</span
            >
          </li>
          <li>
            <span>元素</span>
            <span>Oversized</span>
          </li>
          <li>
            <span>袖长</span>
            <span>长袖</span>
          </li>
          <li>
            <span>版型</span>
            <span>宽松</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="detail-commend">
      <div class="title">相似推荐</div>
      <div class="commend-list">
        <div v-for="item in commend" :key="item.goodsId" class="commend-item">
          <img :src="item.goodsCoverImg" alt="" />
          <div>{{ item.goodsName }}</div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHomeGoods } from "@/network/home.js";
import MySwiper from "@/components/content/swiper/Swiper.vue";
import { getDetailData } from "@/network/detail.js";

export default {
  name: "DetailsContent",
  props: {
    position: String,
    goodsId: String,
  },
  components: {
    MySwiper,
  },
  data() {
    return {
      commend: [],
      swapperList: [],
      target: 0,
    };
  },
  watch: {
    position(now, before) {
      //获取指定的div盒
      let targetbox = document.getElementsByClassName(now);
      //获取这个div盒的高度位置
      this.target = targetbox[0].offsetTop;
      //将滚动条定位到这个高度位置
      this.$emit("position-change", this.target);
    },
  },
  created() {
    getHomeGoods().then((res) => {
      this.commend = res;
    });
    getDetailData(this.goodsId).then((res) => {
      this.swapperList = res.topImage;
    });
  },
  methods: {},
};
</script>

<style scoped>
.detail-banner {
  height: 300px;
}
.detail-promotion {
  height: 30px;
  background-color: var(--color-tint);
  color: #fff;
  line-height: 30px;
  padding-left: 5px;
}
.detail-head {
  font-size: 35px;
  color: #000;
  line-height: 35px;
  padding-top: 3px;
  padding-left: 5px;
}

.detail-head img {
  width: 100%;
}
.head-price span {
  font-size: 10px;
  text-decoration: line-through;
  color: #999;
}

.left {
  float: left;
  width: 70%;
  line-height: 20px;
  font-size: 13px;
}
.left span {
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 10px;
  background-color: var(--color-tint);
  color: rgb(241, 241, 241);
}
.right {
  float: right;
  width: 20%;
  height: 20px;
  line-height: 20px;
  margin: 10px 0;
}
.right img {
  width: 15%;
  margin-right: 3px;
}
.right span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding: 2px 5px;
  font-size: 10px;
  background-color: rgb(231, 230, 230);
  color: #999;
  height: 15px;
}
.post {
  font-size: 10px;
  color: #999;
  height: 40px;

  clear: both;
}
.gray-line {
  height: 14px;
  background-color: rgb(238, 238, 238);
}
.detail-safe {
  font-size: 10px;
  padding: 10px 5px;
}
.detail-safe img {
  width: 13px;
}
.more {
  float: right;
  margin-right: 10px;
  font-size: 15px;
  color: #000;
}
.choose {
  font-size: 10px;
  padding: 10px 5px;
}
.detail-comment {
  padding: 10px 5px;
}
.detail-comment .head {
  color: #999999;
  font-size: 10px;
}
.detail-comment .head span {
  margin-right: 10px;
}
.detail-comment .tag {
  margin-top: 10px;
}
.detail-comment .tag span {
  color: #ff2255;
  background-color: #ffe8ee;
  margin-right: 5px;
  font-size: 10px;
  padding: 4px 5px;
}
.comment-list {
  padding: 10px;
}
.comment-item {
  margin: 10px 0;
  border-bottom: 1px #999;
}
.comment-item .head {
  height: 25px;
  margin-bottom: 10px;
  display: flex;
}
.comment-item .head img {
  border-radius: 50%;
  width: 25px;
}
.comment-item .head div {
  color: #000;
  line-height: 25px;
  font-size: 13px;
  margin-left: 10px;
}
.shop {
  display: flex;
  padding: 10px;
  align-items: center;
}
.shop img {
  width: 50px;
  height: 50px;
}
.shop .shop-inf {
  margin-left: 10px;
}
.shop .shop-inf .shop-name {
  font-size: 12px;
  color: #000;
}
.shop .shop-inf .shop-star {
  display: flex;
  font-size: 10px;
  margin: 5px 0;
}
.shop .shop-inf .shop-star div {
  margin: 0 5px;
}
.shop .shop-inf img {
  width: 9px;
  height: 9px;
}
.shop .shop-inf .shop-data {
  display: flex;
  margin: 5px 0;
}
.shop-inf .shop-data div {
  border: 1px solid #d6d6d6;
  font-size: 10px;
  border-radius: 5px;
  padding: 2px 5px;
  color: #f46;
}
.shop .shop-enter {
  font-size: 10px;
  padding-left: 16px;
}
.shop .shop-enter span {
  margin-left: 2px;
}
.detail-param {
  padding: 10px;
}
.detail-param img {
  width: 100%;
}
.detail-param .param-form {
  margin-top: 10px;
}
.detail-param li {
  border-bottom: 1px solid #f4f4f4;
}
.detail-param li span {
  display: inline-block;
  padding: 5px 10px;
  font-size: 15px;
  vertical-align: middle;
}
.detail-param li span:nth-child(odd) {
  width: 30%;
}
.detail-param li span:nth-child(even) {
  color: #f46;
  width: 70%;
}
.detail-commend {
  padding: 10px;
}
.detail-commend .title {
  color: #f46;
  margin: 10px 0;
}
.commend-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.commend-list .commend-item {
  width: 30%;
}
.commend-item img {
  width: 100%;
}
</style>
